<template>
  <div>
<!--    keep-alive可以缓存动态组件,缓存的组件新增两个 生命周期函数 acived deactied ,-->
<!--      include：允许缓存的组件名称，exclude： 不允许缓存的组件名称； include 和 exclude 不能同时使用-->
    <keep-alive include="Left, Right">
      <component :is="compName"></component>
    </keep-alive>
    <button @click="checkLeftCompHandler">切换Left组件</button>
    <button @click="checkRightCompHandler">切换Right组件</button>
  </div>
</template>

<script>
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import Left from './Left';
  import Right from './Right';

  /*
  * keep-alive 配置的匹配名称：
  * 组件声明的时候，设置了name属性的名称，则优先该名称
  * 组件生命未设置name，则配置组件的注册名称
  */

  @Component({name: 'DynamicComp'})
  export default class DynamicComp extends Vue{
    compName = 'Left';

    checkLeftCompHandler() {
      this.compName = 'Left'
    }
    checkRightCompHandler() {
      this.compName = 'Right'
    }
   };
</script>

<style scoped>

</style>
